<template>
  <div>
    <!-- <div class="user-info"> -->
    <!-- <div class="info-box" @click="login">{{ encryption }}</div> -->
    <div class="info-right">
      <!-- <div class="info-box" @click="toMining">
          {{ t("homeRight") }}UKey：{{ info.uddNum || "0" }}
        </div> -->
      <van-popover
        v-model:show="isShowI18n"
        :actions="actionsList"
        placement="bottom-end"
        @select="onI18nSelect"
      >
        <template #reference>
          <img
            style="width: 22px; height: 22px; margin-left: 15px"
            src="@/static/fill-earth.png"
            mode="widthFix"
            alt=""
          />
        </template>
      </van-popover>
      <img
        style="width: 21px; height: 21px; margin-left: 15px"
        src="@/static/menu.png"
        mode="widthFix"
        alt=""
        @click="showRight = true"
      />
      <!-- <van-popover
          v-model:show="isShowMenu"
          :actions="menuActionsList"
          placement="bottom-end"
          @select="onMenuSelect"
        >
          <template #reference>
            <img
              style="width: 26px; height: 26px; margin-left: 15px"
              src="@/static/menu.png"
              mode="widthFix"
              alt=""
            />
          </template>
        </van-popover> -->
    </div>
    <!-- </div> -->
    <!-- 右侧菜单弹出框 -->
    <van-popup
      v-model:show="showRight"
      position="right"
      :style="showRightStyle"
    >
      <div>
        <div class="head-box">
          <img src="@/static/logo2x.png" alt="" srcset="" />
          <div class="head-title">UKEY NETWORK</div>
        </div>

        <div>
          <div
            :class="
              checkoutValue === 1 ? 'do-checkout-right' : 'no-checkout-right'
            "
            @click="toHome"
          >
            <img :src="checkoutValue === 1 ? doHome : noHome" alt="" />
            <span
              :class="
                checkoutValue === 1
                  ? 'do-checkout-right-text'
                  : 'no-checkout-right-text'
              "
              >{{ t('home') }}</span
            >
          </div>
          <div
            :class="
              checkoutValue === 2 ? 'do-checkout-right' : 'no-checkout-right'
            "
            @click="toMining"
          >
            <img :src="checkoutValue === 2 ? doWa : noWa" alt="" />
            <span
              :class="
                checkoutValue === 2
                  ? 'do-checkout-right-text'
                  : 'no-checkout-right-text'
              "
              >{{ t('my') }}{{ t('homeRight') }}</span
            >
          </div>
          <div
            :class="
              checkoutValue === 3 ? 'do-checkout-right' : 'no-checkout-right'
            "
            @click="toLog"
          >
            <img :src="checkoutValue === 3 ? doLog : noLog" alt="" />
            <span
              :class="
                checkoutValue === 3
                  ? 'do-checkout-right-text'
                  : 'no-checkout-right-text'
              "
              >{{ t('incomeRecord') }}</span
            >
          </div>
          <div
            :class="
              checkoutValue === 4 ? 'do-checkout-right' : 'no-checkout-right'
            "
            @click="toIntroduce"
          >
            <img :src="checkoutValue === 4 ? doJie : noJie" alt="" />
            <span
              :class="
                checkoutValue === 4
                  ? 'do-checkout-right-text'
                  : 'no-checkout-right-text'
              "
              >{{ t('projectIntroduction') }}</span
            >
          </div>
        </div>

        <div class="foot-copy">
          <div class="foot-copy-box" @click="copyMail">{{ t('copyMailbox') }}</div>
          <div>ukeydao@proton.me</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import doHome from "@/static/icon/do-home.png";
import noHome from "@/static/icon/no-home.png";
import doWa from "@/static/icon/do-wa.png";
import noWa from "@/static/icon/no-wa.png";
import doLog from "@/static/icon/do-log.png";
import noLog from "@/static/icon/no-log.png";
import doJie from "@/static/icon/do-jie.png";
import noJie from "@/static/icon/no-jie.png";
import { ref, defineProps, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { actionsListData } from "@/utils/enumerationData";
import { useRouter } from "vue-router";
import { showFailToast, showSuccessToast } from "vant";
import useClipboard from "vue-clipboard3";
const { t, locale } = useI18n();
const { toClipboard } = useClipboard();
const router = useRouter();
const store = useStore();
const props = defineProps({
  //子组件接收父组件传递过来的值
  isBnb: Boolean,
  address: String,
  info: Object,
  encryption: String,
});

const showRight = ref(false);
const isShowI18n = ref(false);
const actionsList = ref(actionsListData);
const showRightStyle = ref({
  width: "50%",
  height: "100%",
});
const checkoutValue = ref(1);
// data() {
//   return {
//     showRight: false, // 是否展开右侧弹窗
//     isShowI18n: false, // 是否展开国际化
//     actionsList: actionsListData,
//     showRightStyle: {
//       width: "50%",
//       height: "100%",
//     },
//   };
// },
onMounted(() => {
  checkoutValue.value = store.getters.getCheckoutValue;
});
// 点击前往首页
const toHome = () => {
  store.dispatch("setCheckoutValue", 1);
  showRight.value = false;
  router.replace("/");
};
// 点击前往项目介绍页面
const toIntroduce = () => {
  store.dispatch("setCheckoutValue", 4);
  showRight.value = false;
  router.push("/introduce");
};
// 点击前往挖矿页面
const toMining = () => {
  store.dispatch("setCheckoutValue", 2);
  showRight.value = false;
  if (props.isBnb) {
    showFailToast(t("chainTip"));
    return;
  }
  if (window.localStorage.getItem('token') && window.localStorage.getItem('walletAddress') === props.address) {
    router.push(`/mining?uddNum=${props.info.uddNum}`);
  } else {
    showFailToast(t("toMiningFail"));
  }
};
// 点击前往收益记录页面
const toLog = () => {
  if (props.isBnb) return;
  store.dispatch("setCheckoutValue", 3);
  showRight.value = false;
  router.push("/log");
};
// 选择语言
const onI18nSelect = (e) => {
  locale.value = e.value;
  console.log(t("simplifiedChinese"), "e");
};
// 复制
const copyMail = (e) => {
  e.stopPropagation();
  toClipboard('ukeydao@proton.me');
  showSuccessToast(t("successfulReplication"));
};
</script>

<style lang="scss" scoped>
@import "../views/home/homeView.scss";
:deep(.van-popup--right) {
  background-color: #000;
}
</style>
